<template>
  <div class="analysis-container">
    <NavBar />
    
    <div class="content">
      <div class="tabs">
        <div 
          class="tab" 
          :class="{ active: activeTab === 'record' }"
          @click="activeTab = 'record'"
        >
          体质记录
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'track' }"
          @click="activeTab = 'track'"
        >
          体质追踪
        </div>
        <div 
          class="tab" 
          :class="{ active: activeTab === 'followup' }"
          @click="activeTab = 'followup'"
        >
          回访
        </div>
      </div>

      <div class="tab-content">
        <div v-if="activeTab === 'record'">
          <h2>体质记录</h2>
          <div v-if="loading" class="loading">加载中...</div>
          <div v-else class="record-list">
            <div v-for="item in resultList" :key="item.id" class="record-item">
              <div class="record-content">
                <p>角色：{{ roleMap[item.curetypeId] || item.curetypeId }}</p>
                <p>问卷：{{ questionnaireMap[item.queslistId] || item.queslistId }}</p>
                <p>答题结果：{{ parseConstitutionType(item.answerlistResult) }}</p>
                <p>测试时间：{{ item.createTime }}</p>
              </div>
              <div class="action-buttons">
                <button 
                  class="submit-btn"
                  @click="handleSubmitBSHF(item)"
                >
                  提交辨识
                </button>
                <button 
                  class="delete-btn"
                  @click="handleDelete(item.id)"
                >
                  删除记录
                </button>
              </div>
            </div>
            <el-dialog
              v-model="dialogVisible"
              title="选择医生"
              width="30%"
              :before-close="handleDialogClose"
            >
              <el-form :model="bshfForm" label-width="80px">
                <el-form-item label="选择医生">
                  <el-select v-model="bshfForm.doctorId" placeholder="请选择医生">
                    <el-option
                      v-for="doctor in doctorList"
                      :key="doctor.id"
                      :label="doctor.name"
                      :value="doctor.id"
                    />
                  </el-select>
                </el-form-item>
              </el-form>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitBSHF">确定</el-button>
                </span>
              </template>
            </el-dialog>
            <div v-if="resultList.length === 0" class="empty-tip">
              暂无历史测试记录
            </div>
          </div>
        </div>
        <div v-else-if="activeTab === 'track'">
          <h2>体质追踪</h2>
          
          <!-- 两个图表并排展示 -->
          <div class="charts-container">
            <div class="chart-box">
              <h3>体质变化趋势图</h3>
              <div ref="chartRef" class="chart-container"></div>
            </div>
            
            <div class="chart-box">
              <h3>体质空间分布图</h3>
              <div ref="radarChartRef" class="chart-container"></div>
            </div>
          </div>
        </div>

        <div v-else-if="activeTab === 'followup'">
          <h2>医生回访</h2>
          <div v-if="followupLoading" class="loading">加载中...</div>
          <div v-else class="followup-list">
            <div v-if="followupList.length === 0" class="empty-tip">
              暂无医生回访记录
            </div>
            <div v-else>
              <div v-for="item in followupList" :key="item.id" class="followup-card">
                <div class="followup-header">
                  <span class="doctor-name">医生: {{ doctorMap[item.doctorId] || `医生ID: ${item.doctorId}` }}</span>
                  <span class="followup-date">{{ formatDate(item.createTime) }}</span>
                </div>
                <div class="followup-body">
                  <p class="questionnaire">问卷: {{ questionnaireMap[item.quesnaireId] || `问卷ID: ${item.quesnaireId}` }}</p>
                  <p class="remark">医生建议: {{ item.remark || '暂无建议' }}</p>
                  <div class="followup-actions">
                    <button class="goto-test-btn" @click="openRoleDialog(item)">前往做题</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 角色选择弹窗 -->
  <el-dialog
    v-model="roleDialogVisible"
    title="选择角色"
    width="30%"
  >
    <el-form :model="roleForm" label-width="80px">
      <el-form-item label="选择角色">
        <el-select v-model="roleForm.roleId" placeholder="请选择角色">
          <el-option
            v-for="role in allRoles"
            :key="role.id"
            :label="role.rolename"
            :value="role.rolename"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="roleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="goToTest">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import NavBar from './NavBar.vue';
import useAnalysis from '../js/analysis.js';

const {
  activeTab,
  resultList,
  loading,
  roleMap,
  questionnaireMap,
  chartRef,
  radarChartRef,
  dialogVisible,
  doctorList,
  bshfForm,
  currentResult,
  handleDelete,
  parseConstitutionType,
  handleSubmitBSHF,
  handleDialogClose,
  submitBSHF,
  // 添加这些属性
  followupList,
  followupLoading,
  doctorMap,
  formatDate,
  // 添加角色选择相关属性和方法
  roleDialogVisible,
  roleForm,
  allRoles,
  openRoleDialog,
  goToTest
} = useAnalysis();
</script>

<style scoped src="../css/analysis.css"></style>


